<template>
  <uni-card class="my-exam-page" :is-full="true" spacing="0">
    <uni-forms ref="formRef" :rules="formRules" :modelValue="form">
      <uni-forms-item label="旧密码" name="oldPwd">
        <uni-easyinput
          type="password"
          v-model="form.oldPwd"
          focus
          placeholder="请输入旧密码"
        />
      </uni-forms-item>
      <uni-forms-item label="新密码" name="newPwd">
        <uni-easyinput
          type="password"
          v-model="form.newPwd"
          placeholder="请输入新密码"
        />
      </uni-forms-item>
    </uni-forms>
    <button type="primary" @click="pwdUpdate">确定</button>
  </uni-card>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from "vue";
import http from "@/utils/request.js";

const form = reactive({
  oldPwd: "",
  newPwd: "",
});
const formRef = ref();
const formRules = reactive({
  oldPwd: {
    rules: [
      {
        required: true,
        errorMessage: "旧密码不能为空",
      },
      {
        minLength: 8,
        maxLength: 20,
        errorMessage: "长度介于{minLength}-{maxLength}",
      },
      {
        pattern:
          /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@#!%^*?&+-.])[A-Za-z\d$@#!%^*?&+-.]{8,}/,
        errorMessage: "密码应当至少8位且含有数字、大小写字母及特殊字符",
      },
    ],
  },
  newPwd: {
    rules: [
      {
        required: true,
        errorMessage: "新密码不能为空",
      },
      {
        minLength: 8,
        maxLength: 20,
        errorMessage: "长度介于{minLength}-{maxLength}",
      },
      {
        pattern:
          /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@#!%^*?&+-.])[A-Za-z\d$@#!%^*?&+-.]{8,}/,
        errorMessage: "密码应当至少8位且含有数字、大小写字母及特殊字符",
      },
    ],
  },
});

// 密码修改
async function pwdUpdate() {
  formRef.value.validate().then(async (res) => {
    let { code, msg } = await http.post("login/pwd", { ...form });
    if (code !== 200) {
      return;
    }
    uni.navigateBack();
  });
}
</script>

<style lang="scss" scoped>
.my-exam-page {
  :deep(.is-input-border) {
    border: initial;
    border-bottom: 1rpx solid #f0f0f0;
    border-radius: 0rpx;
  }
  :deep uni-button[type='primary'] {
    background: linear-gradient(to right, #24b0fb, #1c90fa);
    border-color: #24b0fb;
    font-weight: bold;
    margin-bottom: 40rpx;
    border-radius: 12px;
    font-size: 36rpx;
    height: 100rpx;
    line-height: 100rpx;
  }
  :deep .uni-btn[type="primary"]:not([hover-class]):active {
    background: linear-gradient(to right, #24b0fb, #1c90fa);
    border-color: #24b0fb;
  }
  :deep .uni-easyinput__placeholder-class {
    font-size: 36rpx;
    color: #333;
  }
  :deep .uni-forms-item {
    margin-bottom: 40rpx;
  }
  :deep .uni-easyinput__content-input {
    height: 100rpx;
  }
  :deep .uni-input-input {
    font-size: 36rpx;
  }
  :deep .uni-forms-item__label{
	height: 100rpx;
	font-size: 30rpx;
	width: 120rpx!important;

;
  }
}
</style>